<style>
    .twoDiv {
        padding: 10px 0px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        height: 60px;
    }

    .three {
        height: 500px;
        padding: 10px 0px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">车辆管理</div>

                        <div class="layui-card-body">
                            <div class="twoDiv ">
                                <form class="layui-form layui-form-pane" action="#" lay-filter="example">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">司机</label>
                                            <div class="layui-input-inline" style="width:150px;">
                                                <input type="tel" id="ownername" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">车号</label>
                                            <div class="layui-input-inline" style="width:150px;">
                                                <input type="text" id="licensetag" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">车辆类型</label>
                                            <div class="layui-input-inline" style="width:150px;">
                                                <input type="text" id="vehicleType" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">所属分站</label>
                                            <div class="layui-input-block" style="width:150px;">
                                                <select id="subId">
                                                    <option value="">---请选择---</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="three">
                                <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" style="width:80px" lay-event="tanchu">新增</button>
        <button class="layui-btn layui-btn-sm" style="width:80px" lay-event="sou">查询</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="path">运输路线</a>
</script>
<script>
    layui.use(['table', 'form', 'jquery', 'layer', 'tree', 'util'], function () {
        //初始化
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;

        table.render({
            //1.绑定容器
            elem: '#userTable'
            , id: 'tables'
            , height: 350
            //2.绑定数据来源，一般json格式数据
            //,url: 'js/data.json' //数据接口
            , url: '../../../../getAllDriver.action'
            , page: true //开启分页
            , limits: [5, 10, 15, 20]
            , limit: 5
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'print', 'exports']
            //3.在表头设定对应的字段
            , cols: [[ //表头   field：绑定列的数据
                {type: 'checkbox'}
                , {field: 'subId', title: 'ID'}
                , {field: 'licensetag', title: '车号'}
                , {field: 'licensetag', title: '车号'}
                , {field: 'ownername', title: '司机'}
                , {field: 'phone', title: '手机号码'}
                , {
                    field: 'subName', title: '所属分站', templet: function (res) {
                        return res.substation.subName;
                    }
                }
                , {field: 'vehicleType', title: '车辆类型'}
                , {field: 'maximumload', title: '最大载重'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]]
        });

        $.ajax({
            type: "post"
            , url: "../../../../getAllSubstation.action"
            , dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    //循环添加选项
                    $("#subId").append("<option value=" + data[i].subName + ">" + data[i].subName + "</option>");
                }
                form.render();
            }
        });

        //头工具栏事件
        table.on('toolbar(userTable)', function (obj) {
            switch (obj.event) {
                case 'tanchu':
                    adduser();
                    break;
                case 'sou':
                    var ownername = $("#ownername").val();
                    var licensetag = $("#licensetag").val();
                    var subId = $("#subId").val();
                    var vehicleType = $("#vehicleType").val();
                    table.reload('tables', {
                        url: '../../getAllDrivers.action',
                        where: { //设定异步数据接口的额外参数，任意设
                            "ownername": ownername,
                            "licensetag": licensetag,
                            "subName": subId,
                            "vehicleType": vehicleType,
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false;
                    break;
            }
            ;
        });

        table.on('tool(userTable)', function (obj) {
            var data1 = obj.data.driverId;
            if (obj.event === 'del') {
                layer.confirm('真的删除吗？', function (index) {
                    obj.del();
                    $.ajax({
                        url: "../../../../deleteDriver.action",//请求的服务端地址
                        type: "post",//请求方式
                        data: {
                            driverId: data1,
                        },
                        success: function (data) {
                            //表刷新方法
                            table.reload("tables")
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                $.ajax({
                    type: "post"
                    , url: "../../../../getDriverById.action"
                    , data: {
                        driverId: data1,
                    }
                    , dataType: "json"
                    , success: function (data) {
                        //弹出层
                        popups();
                        /!* 必须使用延时器否则有时候出不来 *!/
                        setTimeout(function () {
                            //jquery获取内嵌框架对象
                            var iframes = $("#iframes").contents();
                            //获取要修改的数据显示到文本框中
                            iframes.find("#driverId").val(data.driverId);
                            iframes.find("#trafficcircuitone").val(data.trafficcircuitone);
                            iframes.find("#trafficcircuittwo").val(data.trafficcircuittwo);
                            iframes.find("#location").val(data.location);
                            iframes.find("#licensetag").val(data.licensetag);
                            iframes.find("#phone").val(data.phone);
                            iframes.find("#trailer").val(data.trailer);
                            iframes.find("#vehicleproperty").val(data.vehicleproperty);
                            iframes.find("#ownername").val(data.ownername);
                            iframes.find("#identitycard").val(data.identitycard);
                            iframes.find("#owneraddress").val(data.owneraddress);
                            iframes.find("#maximumload").val(data.maximumload);
                            iframes.find("#remark").val(data.remark);
                            iframes.find("#vehicleType").val(data.vehicleType);
                            iframes.find("#subName").val(data.subId);
                        }, 800);
                    }
                });
            } else if (obj.event === 'path') {
                //iframe层
                //iframe层
                layer.open({
                    type: 2,
                    title: '路线查看',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['500px', '500px'],
                    content: '/src/views/system/iframe/showDriverMap.html' //iframe的url
                    , success: function (layero, index) {
                        setTimeout(function () {
                            var body = layer.getChildFrame('body', index); // body.html() body里面的内
                            body.find("#mapId").val(data1); // 方式一
                        },200)
                    }
                });
            }
        });


        function popups() {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: "修改",
                    skin: 'layui-layer-molv',//皮肤
                    content: '测试回调',
                    //大小
                    area: ['660px', '600px'],
                    btn: [],
                    content: '<iframe src=\'../src/views/system/iframe/updateDriver.html\' id="iframes" frameborder="0" width="100%" height="100%"></iframe>',
                    closeBtn: 2, //关闭按钮样式默认1
                    anim: 4,//设置关闭动画
                });
            });
        }

        function adduser() {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: "新增",
                    skin: 'layui-layer-molv',//皮肤
                    content: '测试回调',
                    //大小
                    area: ['660px', '600px'],
                    btn: [],
                    content: '<iframe src=\'../src/views/system/iframe/addDriver.html\' id="iframe" frameborder="0" width="100%" height="100%"></iframe>',
                    closeBtn: 2, //关闭按钮样式默认1
                    anim: 4 //设置关闭动画
                });
            });
        }
    })
    ;
</script>


